<template>
  <div>
    <el-drawer v-model="drawer" title="主题配置" size="300px">
      <div class="theme-item">
        <label>导航栏布局</label>
        <el-select v-model="layout" placeholder="请选择" style="width: 150px" @change="(val) => changeSwitch('mode', val)">
          <el-option label="纵向" value="vertical"></el-option>
          <el-option label="横向" value="horizontal"></el-option>
          <el-option label="分栏" value="columns"></el-option>
        </el-select>
      </div>
      <div class="theme-item">
        <label>主题颜色</label>
        <el-color-picker v-model="primary" :predefine="predefineColor" @change="changePrimary" />
      </div>
      <div class="theme-item">
        <label>暗黑模式</label>
        <switch-dark></switch-dark>
      </div>
      <div class="theme-item">
        <label>灰色模式</label>
        <el-switch v-model="gray" @change="(val) => changeGrayWeak('gray', val)" />
      </div>
      <div class="theme-item">
        <label>色弱模式</label>
        <el-switch v-model="weak" @change="(val) => changeGrayWeak('weak', val)" />
      </div>
      <div class="theme-item">
        <label>标签栏</label>
        <el-switch v-model="showTag" @change="(val) => changeSwitch('showTag', val)" />
      </div>
      <div class="theme-item">
        <label>侧边栏 Logo</label>
        <el-switch v-model="showLogo" @change="(val) => changeSwitch('showLogo', val)" />
      </div>
      <div class="theme-item">
        <label>保持一个子菜单的展开</label>
        <el-switch v-model="uniqueOpened" @change="(val) => changeSwitch('uniqueOpened', val)" />
      </div>
      <div class="theme-item">
        <label>固定header</label>
        <el-switch v-model="fixedHeader" @change="(val) => changeSwitch('fixedHeader', val)" />
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  onMounted,
  watch
} from 'vue';

// import { ElMessage } from 'element-plus';
import SwitchDark from '@/components/SwitchDark/index.vue';
import { PRIMARY_COLOR } from '@/config/index';
import { useSettingStore } from '@/store/modules/setting';
import {
  closeLoading,
  openLoading
} from '@/utils/element';
import { colorRgba } from '@/utils/index';

const SettingStore = useSettingStore()
const layout = computed(() => SettingStore.themeConfig.mode)
const showTag = computed(() => SettingStore.themeConfig.showTag)
const showLogo = computed(() => SettingStore.themeConfig.showLogo)
const uniqueOpened = computed(() => SettingStore.themeConfig.uniqueOpened)
const primary = computed(() => SettingStore.themeConfig.primary)
const fixedHeader = computed(() => SettingStore.themeConfig.fixedHeader)
const gray = computed(() => SettingStore.themeConfig.gray)
const weak = computed(() => SettingStore.themeConfig.weak)
// const layout = ref(SettingStore.themeConfig.mode)
// const showTag = ref(SettingStore.themeConfig.showTag)
// const showLogo = ref(SettingStore.themeConfig.showLogo)
// const uniqueOpened = ref(SettingStore.themeConfig.uniqueOpened)
// const primary = ref(SettingStore.themeConfig.primary)
// const fixedHeader = ref(SettingStore.themeConfig.fixedHeader)
// const gray = ref(SettingStore.themeConfig.gray)
// const weak = ref(SettingStore.themeConfig.weak)

const drawer = computed({
  get() {
    return SettingStore.themeConfig.showSetting;
  },
  set() {
    changeSwitch('showSetting', !SettingStore.themeConfig.showSetting)
  }
})

// 预定义主题颜色
const predefineColor = [
  '#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d'
];

// 进行配置
const changeSwitch = (key, val) => {
  SettingStore.setThemeConfig({ key, val })
  if (key === 'mode') {
    openLoading()
    setTimeout(() => {
      closeLoading()
    }, 600)
  }
}

// 监听布局变化
watch(
  () => layout.value,
  () => {
    const body = document.body as HTMLElement;
    body.setAttribute("class", `layout-${layout.value}`);
  },
  { immediate: true }
);
// 修改主题颜色
const changePrimary = (val) => {
  if (!val) {
    primary.value = val = PRIMARY_COLOR;
    // ElMessage({ type: "success", message: `主题颜色已重置为 ${PRIMARY_COLOR}` });
  }
  const opacity = colorRgba(val, 0.6)
  document.documentElement.style.setProperty("--el-color-primary", val);
  document.documentElement.style.setProperty("--el-color-primary-light-3", opacity);
  changeSwitch('primary', val)
}

// 修改灰色模式
const changeGrayWeak = (type, val) => {
  const body = document.documentElement as HTMLElement;
  if (!val) return body.setAttribute("style", ""), changeSwitch('gray', val), changeSwitch('weak', val)
  if (type === "gray") body.setAttribute("style", "filter: grayscale(1)");
  if (type === "weak") body.setAttribute("style", "filter: invert(80%)");
  changeSwitch(type, val)
}
onMounted(() => {
  changePrimary()
  if (SettingStore.themeConfig.weak) {
    changeGrayWeak('weak', SettingStore.themeConfig.weak)
  } else if (SettingStore.themeConfig.gray) {
    changeGrayWeak('gray', SettingStore.themeConfig.gray)
  }
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px 14px;
  margin-bottom: 0;
}

:deep(.el-drawer__title) {
  font-weight: bold;
  color: black;
}

.theme-item {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  font-size: 14px;
  color: black;
  justify-content: space-between;

}
</style>
